<template>
  <div>
    <!-- 导航区 -->
    <ul class="news-title-list">
      <li v-for="news in newsList" :key="news.id">
        <!-- 嵌套路由的跳转链接 -->
         <!-- 加上replace没有历史记录了 -->
        <button @click="handleDetail(news)">查看新闻详情</button>  
        <RouterLink :to="{name: 'detail', params: { ...news }}">{{ news.title }}</RouterLink>
      </li>
    </ul>
    <!-- 内容区 -->
     <!-- 嵌套路由的显示区域 -->
     <div class="new-content">
      <router-view></router-view>
     </div>
  </div>
</template>

<script setup lang="ts" name="News">
  import { reactive } from 'vue'
  import { useRouter } from 'vue-router'

  const newsList = reactive([
    {
      id: 1,
      title: '标题1',
      content: '内容1',
    },
    {
      id: 2,
      title: '标题2',
      content: '内容2',
    },
    {
      id: 3,
      title: '标题3',
      content: '内容3',
    },
  ])
  const router = useRouter()
  interface NewsInter {
    id: number,
    title: string,
    content: string
  }

  const handleDetail = (news: NewsInter ) => {
    // 跳转路由: 这里如果用router.replace 不会有历史记录
    router.push({
      name: 'detail',
      params: {
        id: news.id,
        title: news.title,
        content: news.content
      }
    })
  }
</script>

<style lang="less" scoped>
.news-title-list {
  width: 30%;
  float: left;
  margin: 0;
  li {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
  }
}
.new-content {
  float: right;
  width: 70%;
  height: 300px;
  border: 1px solid blue;
}

</style>